<!--
 * @Description: 维修建议
 * @Autor: 何兴家
 * @Date: 2020-11-20 13:36:23
 * @LastEditors: 何兴家
 * @LastEditTime: 2021-01-19 17:25:18
-->
<template>
  <div>
    <BreakSpace label="建议维修项目" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
    <FilterTable
      ref="repairProTable"
      columnsRef="repair_repairReception_precontractArrange_repairSuggest_repairPro"
      height="auto"
      :dataSource="repairLabourList"
      :columns="repairProColumns"
      :onColumnsChange="columns => (this.repairProColumns = columns)"
      :onSyncTableData="handleLabourTableChange"
      :onRowSelectChange="handleLabourTableSelect"
    >
    </FilterTable>
    <BreakSpace label="建议维修配件" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
    <FilterTable
      ref="repairPartTable"
      columnsRef="repair_repairReception_precontractArrange_repairSuggest_repairPart"
      height="auto"
      :dataSource="repairPartList"
      :columns="repairPartColumns"
      :onColumnsChange="columns => (this.repairPartColumns = columns)"
      :onSyncTableData="handlePartTableChange"
      :onRowSelectChange="handlePartTableSelect"
    >
    </FilterTable>
    <div class="btnWrap">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';

export default {
  mixins: [dictionary],
  data() {
    this.selectedRepairLabourList = []; // 选中的维修项目数据
    this.selectedRepairPartList = []; // 选中的维修配件数据
    return {
      repairLabourList: [], // 建议维修项目列表（初始化）
      repairPartList: [], // 建议维修备件列表（初始化）
      syncRepairLabourList: [], // 同步的维修项目
      syncRepairPartList: [], // 同步的维修备件
      repairProColumns: this.createRepairProColumns(),
      repairPartColumns: this.createRepairPartColumns()
    };
  },
  methods: {
    createRepairProColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.$index + 1}</span>;
          }
        },
        {
          title: '经销商',
          dataIndex: 'DEALER',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目代码',
          dataIndex: 'LABOUR_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修项目名称',
          dataIndex: 'LABOUR_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工时',
          dataIndex: 'STD_LABOUR_HOUR',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工时费',
          dataIndex: 'LABOUR_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '不修原因',
          dataIndex: 'reason',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '建议日期',
          dataIndex: 'date',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作员',
          dataIndex: 'p',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'LICENCE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发动机号',
          dataIndex: 'enge',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '服务顾问',
          dataIndex: 'service',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    createRepairPartColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.$index + 1}</span>;
          }
        },
        {
          title: '经销商',
          dataIndex: 'DEALER',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '仓库',
        //   dataIndex: 'STORAGE_CODE',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: []
        // },
        {
          title: '配件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '配件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '数量',
          dataIndex: 'BOOKING_QUANTITY',
          sorter: true,
          filter: true,
          filterType: 'number',
          editType: 'text',
          editable: true,
          defaultEditable: true
        },
        {
          title: '单价',
          dataIndex: 'SALES_PRICE',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '不修原因',
          dataIndex: 'reason',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '建议日期',
          dataIndex: 'date',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '操作员',
          dataIndex: 'p',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'LICENCE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发动机号',
          dataIndex: 'enge',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '服务顾问',
          dataIndex: 'service',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    // 同步维修项目table数据
    handleLabourTableChange(list) {
      this.syncRepairLabourList = list;
    },
    // 同步维修配件table数据
    handlePartTableChange(list) {
      this.syncRepairPartList = list;
    },
    // 维修项目选中
    handleLabourTableSelect(list) {
      this.selectedRepairLabourList = list;
    },
    // 维修配件选中
    handlePartTableSelect(list) {
      this.selectedRepairPartList = list;
    },
    // 点击取消
    handleCancel() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
